<!-- 我的抽屉 -->
<template>
<el-drawer
  :title="title"
  :visible.sync="show"
  direction="rtl"
  :size="width"
  custom-class="com-drawer-wp">
  <div class="drawer__content">
    <div class="drawer__main" v-loading="loading" element-loading-text="拼命加载中">
      <slot></slot>
    </div>
    <div v-if="$scopedSlots.footer" class="drawer__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</el-drawer>
</template>
<script>
export default {
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: {
    // 显示控制
    visible: {
      default: false
    },
    // 标题
    title: {
      default: '我的抽屉'
    },
    // 加载中
    loading: {
      default: false
    },
    // 宽度
    width: {
      default: '700px'
    }
  },
  computed: {
    show: {
      get () {
        return this.visible;
      },
      set (val) {
        this.$emit('change', val);
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.com-drawer-wp {
  .drawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    .drawer__main {
      flex: 1;
      padding: 24px;
      overflow: auto;
      box-sizing: border-box;
    }
    .drawer__footer {
      padding: 10px 16px;
      border-top: 1px solid #E8E8E8;
      text-align: right;
    }
  }
}
</style>
<style lang="scss">
.com-drawer-wp {
  .el-drawer__header {
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid #e8e8e8;
    & > :first-child {
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
    }
  }
}
</style>

